<template>
	<view class="ag_container">
		<!-- 顶部导航 -->
		<uni-nav-bar :fixed="true" backgroundColor="#00a660" color="#fff" height="90rpx">
			<block slot="left">
				<i class="iconfont nav_backIcon" @click="back">&#xe8b8;</i>
				<span style="font-size: 30rpx;">文件内容填写</span>
			</block>
			<block slot="right">
				 <button @click="confirm" size="mini" class="confirm_btn">确 定</button>
			</block>
		</uni-nav-bar>
		<view class="title_border">共有 {{contractTemplateParam.length}} 个参数，已填写 {{parameterSize}} 个</view>
		<!-- 参数设置 -->
		<view style="padding: 30rpx 30rpx 0;" v-if="contractTemplateParam.length !== 0">
			<uni-forms ref="ruleForm" label-position="top" :name="item.ids" 
			v-for="(item, index) in contractTemplateParam" :key="index">
				<!-- 单行文本 -->
				<uni-forms-item v-if="item.paramType==1">
					 <template v-slot:label>
					<span class="label_tit">{{item.name}}
					<i class="iconfont duihaoIcon" v-if="item.paramValue">&#xe657;</i>		 
					</span>
					 	<uni-easyinput :clear-icon="false" v-model="item.paramValue" :maxlength="item.paramLimit"
				@input="updateContractParamList($event,item)" placeholder="请输入内容" class="flex_input" @blur="updateContractParam(item)"/>
					 </template>
				</uni-forms-item>
				<!-- 多行文本 -->
				<uni-forms-item v-if="item.paramType==2">
					 <template v-slot:label> 
					 <span class="label_tit">{{item.name}}
					 <i class="iconfont duihaoIcon" v-if="item.paramValue">&#xe657;</i>		 
					 </span>
					 	<uni-easyinput type="textarea" :clear-icon="false" v-model="item.paramValue" :maxlength="item.paramLimit" placeholder="请输入内容" class="flex_input" @input="updateContractParamList($event,item)" @blur="updateContractParam(item)"/>
					 </template>
				</uni-forms-item>
				 <!-- 日期控件 -->
				<uni-forms-item v-if="item.paramType==3">
					 <template v-slot:label>
					 <span class="label_tit">{{item.name}}
					 <i class="iconfont duihaoIcon" v-if="item.paramValue">&#xe657;</i>		 
					 </span>
					 	<uni-datetime-picker type="date" :clear-icon="false" v-model="item.paramValue" :start="startDate"
					placeholder="请设置合同日期" class="flex_input" @change="updateContractParamList($event,item)" @blur="updateContractParam(item)"/>
					 </template>
				</uni-forms-item>
			</uni-forms>
			</view>		
			<!-- 暂无数据 -->
			<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
	</view>
</template>
<script>
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	import {getContractFileParam,upContractFileParam} from "@/api/ec/work/contract/contractFileParam";
	import {updateContractFileById} from "@/api/ec/work/contract/contractFileParam";
	import config from '@/config'
	export default {
		components:{luanqingEmpty},
		data() {
			return {
				parameterSize:0,
				startDate:Date.now(),
				contractId:'',
				contractTemplateParam:[],// 参数列表
			};
		},
		onLoad(option) {
			// 获取填写参数的列表
			this.contractTemplateParam = JSON.parse(option.contractTemplateParam)
			this.contractTemplateParam.forEach(item=>{
				if(item.paramValue){
					this.parameterSize++
				}
			})
		},
		methods: {
			updateContractParam(data){
		      // 合同文件参数
		      upContractFileParam(data).then((response)=>{
		      });
			},
			/** 修改 文件参数 */
			updateContractParamList(data,item){
			  // 当参数类型是日期 特殊处理
			  if (item.paramType == 3) {
				  this.parameterSize++
			    // document.getElementById(item.ids).innerText = data;
			  } else {
			    // 检查输入参数长度
			    if (data.length + 1 == item.paramLimit) {
			      this.$modal.msgWarning("输入字数限制" + item.paramLimit + "个字符");
			      return false;
			    }
			    // document.getElementById(item.ids).innerText = data;
			  }
			},
			/** 确认 */
			confirm(){
				// 检验模板参数值是否填写
				for (let i = 0; i < this.contractTemplateParam.length; i++) {
				  let templateParam = this.contractTemplateParam[i];
				  if(templateParam.paramValue==null || templateParam.paramValue==""){
				    this.$modal.msgError("请填写模板参数！")
				    return false;
				  }
				}
					uni.$emit('contractTemplateParam',{tableData:JSON.stringify(this.contractTemplateParam)})
					uni.navigateBack({
						delta:1 
					})	
			},
			/**返回 */
			back(){
			// uni.navigateBack({delta:1})
			uni.showModal({
				title:'系统提示',
				confirmColor:'#00a660',
				confirmText:'保存草稿',
				cancelText:'关闭',
				content:'是否保存草稿',
				success:function(res){
					if(res.confirm){
					this.$modal.msgSuccess("保存成功")
			      	uni.switchTab({
						url:'/pages/index'
					})
					}else if(res.cancel){
						uni.switchTab({
							url:'/pages/index'
						})
					}
				}
			})	
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-navbar__header-btns-left {
	  width: 220rpx !important;
	}
	
	::v-deep .uni-navbar__header-btns-right {
	  width: 420rpx !important;
	}
	.label_tit{height: 45rpx;}
	.duihaoIcon{color: #00a660;font-size: 26rpx;margin-left:8rpx;}
	::v-deep uni-button{margin-left:0 !important;margin-right: 0 !important;border:1rpx solid #fff;}
	::v-deep .uni-easyinput__content-textarea{height: 80rpx;min-height:80rpx;}
	::v-deep .uni-forms-item{margin-bottom: 15rpx;}
	::v-deep .is-required{display: none;}
	::v-deep .uni-easyinput__content-input{font-size: 26rpx}
	::v-deep .uni-easyinput{font-size: 26rpx}
	::v-deep .uni-easyinput__content-textarea{font-size: 26rpx}
	::v-deep .uni-input-input{font-size: 26rpx}
	::v-deep .uni-date__x-input{font-size: 26rpx}
	::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{padding: 0;height: 60rpx;}
    .title_border {
    	color: #00a660;
		font-weight: bold;
		font-size: 28rpx;
		box-shadow: 0 12rpx 4rpx #ebebeb;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
    }
	.confirm_btn{
		height: 60rpx;
		width: 180rpx;
		color: #fff;
		background-color: #00a660;
	}
	page {background: $uni-bg-color;}
	.ag_container {position: relative;}
</style>
